リンク(Aタグ)のdrag and drop
同様に、リンク(Aタグ)の場合もdragenterイベントが発火する
text/plainが入っている
e.dataTransfer.types === ["text/plain", "text/uri-list", "text/html"]
しかし、dropしてもonDropイベントは発生せず、A hrefのURLを開いてしまう
リンクのdropを受け取る
画面全体を覆う巨大な<textarea>を最前面に表示すれば、dropされたAタグのURLを受け取れる
textareaのvalueとしてURLを取得できる
URLに移動してしまう事も防げる
dragenterで
e.dataTransfer.types.includes('text/plain')なら
透明な巨大<textarea>を最前面表示
text/plain以外の場合は
dropイベントのリスナーが付いた<div>を最前面に表示し、通常のファイルアップロード
というふうにやっていますshokai.icon
すると、こういう操作ができるようになる
左がGyazoの画像リストページ、右がscrapbox
https://gyazo.com/edc47b8adab444da4cfd00c5a9fc8bfc
別々のwebブラウザ間でdrag and dropできる
受け取ったURLがGyazoの場合、カッコで囲んで[GyazoURL]にして埋め込み表示する
Scrapboxの関連ページから本文にdrag and drop
https://gyazo.com/8e4b30718909d532072a393be4fd51d6
受け取ったURLがScrapboxページの場合、URLからタイトル部分を取得して[ページタイトル]のリンク記法にする
Quicksearchから本文にdrag and drop
https://gyazo.com/3dca6f4bab32319834f2dcc0b11e5c03
意外とChrome Safari Firefox全てで動くshokai.icon